<template>
  <view class="register">
    <uni-nav-bar title="个人信息" leftIcon="icon-fanhui" rightIcon="true" @clickLeft="$back()">
    </uni-nav-bar>
    <view class="main u-f u-f-jsa u-f-ac">
      <image class="left_img" src="../../static/index/reg_bg.png" mode=""></image>
      <view class="info">
        <view class="row">
          <text>头像</text>
          <view style="flex: 1;text-align: center;">
            <image class="headimg" :src="faceBaceUrl?faceBaceUrl:require('@/static/img/user/default.png')" mode="aspectFill"></image>
            <!-- <view class="upload" @click="chooseimg" :class="{'empty':empty=='photo'}">
              <span class="iconfont icon-shangchuan"></span>
              上传照片
            </view> -->
          </view>


        </view>
        <view class="row">
          <text>姓名</text>
          <view>
            <input type="text" v-model="form.studentName" placeholder="请输入名字" placeholder-class="placeholder_class"
              @blur="inputBlur('studentName',$event)" :class="{'empty':empty=='studentName'}" @confirm="$hideKeyboard()" />
          </view>
        </view>
        <view class="row">
          <text>性别</text>
          <!-- <radio-group @change="radioChange" class="u-f">
            <label class="u-f-ac" v-for="(item, index) in sexs" :key="index">
              <radio :value="index" :checked="index === form.sex" style="transform: scale(0.5);" />
              <text>{{item}}</text>
            </label>
          </radio-group> -->
          <view class="transverse u-f-ac">
            <!-- @tap="radioChange(index)" -->
            <view v-for="(item,index) in sexs" :key="index"  class="u-f-ac margin-lr" style="height: 100%;">
              <view class="radio" :class="[form.sex===index?'check-border':'']">
                <view class="circle"></view>
              </view>
              <text>{{item}}</text>
            </view>
          </view>
         


        </view>
        <view class="row">
          <text>年级</text>
          <!-- <picker @change="PickerChange('education',$event)" :range="educations" :value="form.education"> -->
          <view class="input_text u-f placeholder_class">
            <view class="flex1">{{educations[user.education]}}</view>
            <!-- <span class="iconfont icon-jiantou9"></span> -->
          </view>
          <!-- </picker> -->
        </view>
        <view class="row">
          <text>地区</text>
          <view class="input_text u-f placeholder_class">
            <view class="flex1">{{user.areaName}}</view>
          </view>
        </view>

        <view class="row">
          <text>学校</text>
          <view class="input_text u-f placeholder_class">
              <view class="flex1">{{user.schoolName}}</view>
          </view>
         <!-- <picker @change="PickerChange('schoolId',$event)" :range="schoolList" range-key="schoolTitle" :value="schoolIndex">
            <view class="input_text u-f">
              <view class="flex1" :class="{'placeholder_class':schoolIndex===''}">{{schoolIndex===''?'请选择':schoolList[schoolIndex].schoolTitle}}</view>
              <span class="iconfont icon-jiantou9"></span>
            </view>
          </picker> -->
        </view>
        <view class="row">
          <text>班级</text>
            <view class="input_text u-f placeholder_class">
                <view class="flex1">{{user.className}}</view>
            </view>
        </view>
        <view class="row">
          <text>手机号</text>
          <view class="">
            <input type="number" maxlength="11" v-model="form.phone" placeholder="请输入手机号" placeholder-class="placeholder_class"
              @blur="inputBlur('phone',$event)" :class="{'empty':empty=='phone'}" @confirm="$hideKeyboard()" />
          </view>
          
        </view>
       <!-- <view class="row">
          <text>人脸绑定MAC地址</text>
          <view class="placeholder_class fontsize28">
            {{form.macAddress}}
          </view>
        </view> -->
        <er-button class="marginTop15" title="保存" :isloading='isloading' :isSuccess='isSuccess' @btnClick="regClick"></er-button>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import uploadImage from '@/components/ossutil/uploadFile.js';
  export default {
    computed: { ...mapState(['userInfo', 'faceBaceUrl'])
    },
    data() {
      return {
        form: {
          studentName: '',
          cityId: '',
          provinceId: '',
          education: '',
          phone: '',
          schoolId: '',
          classId: '',
          macAddress: ''
        },
        educations: ['初中', '高中'],
        sexs: ['女', '男'],
        sex: 0,
        classList: [{
          classTitle: '请选择班级'
        }],
        classIndex: '',
        schoolList: [],
        schoolIndex: '',
        isloading: false,
        isSuccess: false,
        empty: '', //失焦空样式
        user: ''
      }
    },
    onLoad() {
      this.form.id = this.userInfo.id
      this.getUserInfo()
    },
    methods: {
      ...mapMutations(['setUserInfo']),
      async getUserInfo() {
        let res = await this.$http.get('/student/' + this.form.id)
        this.user = res.data
        
        // 获取设备标识符
        let obj=await this.$utils.GetMacAdress()
        this.form = {
          ...this.user,
          macAddress: obj.uuid
        }
        console.log(this.form)
        // this.getSchoolList()

      },
      // getClassList() {
      //   this.$http.get('/class/list', {
      //     params: {
      //       schoolId: this.form.schoolId,
      //       size: 10,
      //       page: -1
      //     }
      //   }).then(res => {
      //     console.log(res)
      //     this.classList = res.data.data

      //     this.classIndex = this.classList.findIndex(item => item.id === this.form.classId)
      //   })
      // },
      // 获取学校列表
      getSchoolList() {
        this.$http.get('/school/list', {
          params: {
            education: this.user.education,
            schooltitle: '',
            size: 10,
            page: -1,
            regionId: this.user.regionId
          }
        }).then(res => {
          this.schoolList = res.data.data
          this.schoolIndex = this.schoolList.findIndex(item => item.id === this.form.schoolId)
        })
      },
      // 文本失焦事件
      inputBlur(obj, e) {
        if (!e.detail.value) {
          this.empty = obj
        } else {
          this.empty = ''
        }
      },
      radioChange(e) {
        this.form.sex =e
      },
      // 性别、年级/学校/班级选择器事件
      PickerChange(obj, e) {
        if (e.detail.value === '') {
          this.empty = obj
        } else {
          this.empty = ''
        }
        if (obj === "schoolId") {
          this.form[obj] = this.schoolList[e.detail.value].id
          this.schoolIndex = e.detail.value
          console.log(this.schoolList[e.detail.value])
        } else if (obj === "classId") {
          this.form[obj] = this.classList[e.detail.value].id
          this.classIndex = e.detail.value
        } else {
          this.form[obj] = e.detail.value
        }

      },
      isCheck() {
        for (var item in this.form) {
          console.log(item)
          if (!this.$utils.validate({
              rule: /\S/,
              msg: '必填项未填'
            }, this.form[item])) {
            this.empty = item
            return false
          }
        }
        return true
      },
      // 点击保存按钮
      regClick() {
        if (this.isCheck()) {
          this.isloading = true
           console.log(this.form)
          this.$http.put(`/student/${this.form.id}`, this.form).then(res => {
            if (res.status === 0) {
              this.isloading = false
              this.isSuccess = true
              this.$showToast('保存成功', '', 'success')
              this.$setStorage('user', JSON.stringify(this.form))
              this.setUserInfo(this.form)
              this.$back()

            } else {
              this.$showToast(res.msg)
            }
          })

        }

      },
      chooseimg() {
        uni.chooseImage({
          count: 1,
          sizeType: ['camera', 'original'],
          // 从相册选择
          sourceType: ['album'],
          success: async (chooseImageRes) => {
            if (chooseImageRes.errMsg === "chooseImage:ok") {
              //显示消息提示框
              uni.showLoading({
                mask: true
              })
              //上传图片
              //图片路径可自行修改
              console.log(chooseImageRes)

              this.$http.upload("/common/upload", {
                filePath: chooseImageRes.tempFilePaths[0],
                name: 'file',
                header: {
                  'content-type': 'application/x-www-form-urlencoded'
                }
              }).then(res => {
                // console.log(res)
                this.form.photo = res.data
              }).catch(err => {
                this.$showToast('上传失败')
                console.log(err)
              })
              uni.hideLoading();
              // this.$utils.uploadFile(chooseImageRes.tempFilePaths[0]).then(res=>{
              //   console.log(res)
              //   this.form.photo=res
              //    uni.hideLoading();
              // }).catch(res=>{
              //   console.log(res)
              // })


            }
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  page {
    height: 100%;
  }

  .empty {
    border: 1px solid #F55555 !important;
  }
.transverse{
  @include transverse
}
  .register {
    height: 100%;
    // background: url(../../static/index/home_bg.png) no-repeat;
    // background-size: cover;
    background-color: $bg_color;

    .main {
      height: calc(100vh - var(--status-bar-height) - 8vh);

      .left_img {
        width: px2vw(870);
        height: px2vh(730);
      }

      .info {
        background: #FFFFFF;
        box-shadow: 0px 4px px2vw(20) 0px rgba(0, 160, 240, 0.1);
        border-radius: px2vw(20);
        padding-bottom: px2vw(15);

        .headimg {
          width: px2vw(140);
          height: px2vw(140);
          border-radius: 50%;
        }

        .upload {
          width: px2vw(108);
          height: px2vh(33);
          line-height: px2vh(33);
          background: #FFFFFF;
          border: 1px solid rgba(0, 0, 0, 0.15);
          font-size: px2vw(14);
          color: rgba(0, 0, 0, 0.65);
          text-align: center;
          margin-left: px2vw(64);
        }

        .icon-shangchuan {
          color: #cccccc;
          font-size: px2vw(14);
        }

      }

      .row {
        margin: px2vh(25) px2vh(80) 0upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text{
          &:first-child{
            margin-right:px2vw(10) ;
          }
        }
      }
    }
  }

  .placeholder_class {
    color: #CCCCCC;
  }

  .icon-jiantou9 {
    font-size: px2vh(28);
    margin-right: px2vh(16);
  }

  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
